<template>
  <div v-if="certs.length > 0" class="certificate-list">
    <h2 class="certs-title">
      {{ CretNameEnum[type] }} <i>{{ certs.length }}</i>
    </h2>
    <template v-if="type === 'cert'">
      <div class="cer-boxList" v-for="(certItem, index) in certs" :key="index">
        <h5>
          {{ certItem[CertConfigEnum[type].title] }}
          <Tooltip v-if="certItem.invalidFlag == '0'" :title="certItem.invalidReason">
           <b class="cetTips">证书异常<ExclamationCircleFilled :style="{ fontSize: '16px' }"/></b>
          </Tooltip>
          <Popover v-if="record.length > 0" class="cerRecord"  trigger="click" @visibleChange="handleClickChange(certItem.regId)">
            <template #content>
              <p class="recordTitle">证书轨迹</p>
              <div class="recordCon" v-for="(val,x) in record" :key="x">
                <span>{{ parseTime(val.recTime) }}</span>
                <div>
                  <p>{{val.recTitle}}</p>
                  <p>{{val.itemName}}	</p>
                </div>
              </div>
            </template>
            <span class="blue">查看证书轨迹</span>
          </Popover>
        </h5>
        <Row>
          <Col :span="12">
            <label>注册单位：</label>
            <span>{{ certItem.regCompName }}</span >
          </Col>
          <Col :span="12">
            <label>证书编号：</label>
            <span>{{ certItem.regCertNo }}</span>
          </Col>
          <template v-for="(item, i) in certItem.majorList" :key="i">
            <Col :span="12">
              <label>注册专业：</label>
              <span>
                {{ item.major }}
                <Tooltip
                  v-if="item.invalidFlag == '0'"
                  :title="item.invalidReason"
                >
                  <b class="cetTips"
                    >专业不可用<ExclamationCircleFilled
                      :style="{ fontSize: '16px' }"
                  /></b>
                </Tooltip>
              </span>
            </Col>
            <Col :span="12">
              <label>有效期至：</label>
              <span>{{ parseTime(item.invalidDate) }}</span>
            </Col>
          </template>
          <Col :span="12">
            <label>发证机关：</label>
            <span>{{ certItem.organName ? certItem.organName : "--" }}</span>
          </Col>
        </Row>
      </div>
    </template>
    <template v-else-if="type === 'prof'">
      <div class="cer-boxList" v-for="(certItem, index) in certs" :key="index">
        <h5>
          {{ certItem[CertConfigEnum[type].title] }}
          <Tooltip v-if="certItem.invalidFlag == '0'" :title="certItem.invalidReason">
            <b class="cetTips">证书异常<ExclamationCircleFilled :style="{ fontSize: '16px' }"/></b>
          </Tooltip>
          <Popover v-if="record.length > 0" class="cerRecord"  trigger="click" @visibleChange="handleClickChange(certItem.regId)">
            <template #content>
              <p class="recordTitle">证书轨迹</p>
              <div class="recordCon" v-for="(val,x) in record" :key="x">
                <span>{{ parseTime(val.recTime) }}</span>
                <div>
                  <p>{{val.recTitle}}</p>
                  <p>{{val.itemName}}	</p>
                </div>
              </div>
            </template>
            <span class="blue">查看证书轨迹</span>
          </Popover>
        </h5>
        <Row>
          <template v-for="(item, i) in certItem.majors" :key="i">
            <Col :span="12">
              <label>资格专业：</label>
              <span>
                {{ item.major }}
                <Tooltip
                    v-if="item.invalidFlag == '0'"
                    :title="item.invalidRemark"
                >
                  <b class="cetTips"
                  >专业不可用<ExclamationCircleFilled
                      :style="{ fontSize: '16px' }"
                  /></b>
                </Tooltip>
              </span>
            </Col>
            <Col :span="12">
              <label>有效期至：</label>
              <span>{{ parseTime(item.validDate) }}</span>
            </Col>
          </template>

          <Col :span="12">
            <label>发证机关：</label>
            <span>{{ certItem.organName ? certItem.organName : "--" }}</span>
          </Col>
          <Col :span="12">
            <label>发证时间：</label>
            <span>{{ parseTime(certItem.releaseDate) }}</span>
          </Col>
          <Col :span="12">
            <label>证书编号：</label>
            <span>{{ certItem.certNo }}</span>
          </Col>
        </Row>
      </div>
    </template>
    <template v-else>
      <div class="cer-boxList" v-for="(certItem, index) in certs" :key="index">
        <h5>
          {{ certItem[CertConfigEnum[type].title] }}
          <Tooltip v-if="certItem.invalidFlag == '0'" :title="certItem.invalidReason">
           <b class="cetTips">证书异常<ExclamationCircleFilled :style="{ fontSize: '16px' }"/></b>
          </Tooltip>
        </h5>
        <Row>
          <Col
            v-for="item in CertConfigEnum[type].columns"
            :key="item.key"
            :span="12"
          >
            <label>{{ item.label }}：</label>
            <span v-if="item.type == 'date'">{{
              parseTime(certItem[item.key])
            }}</span>
            <span v-else>{{ certItem[item.key] }}</span>
          </Col>
        </Row>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, PropType, inject, onMounted } from "vue";
import { Row, Col, Tooltip, Popover } from "ant-design-vue";
import { ExclamationCircleFilled } from "@ant-design/icons-vue";
import { getPersonCertApi, getRecordApi } from "/@/api/staff";
import { parseTime } from "/@/utils";

enum CretNameEnum {
  cert = "注册证书", //注册
  titl = "职称证书", //职称
  safe = "安管证书", //安管
  spec = "特种作业证书", //特种
  tech = "技术证书", //技术
  prof = "岗位证书", //岗位
}

export default defineComponent({
  name: "certList",
  components: { Row, Col, Tooltip, Popover, ExclamationCircleFilled },
  props: {
    type: {
      type: String as PropType<string>,
      require: true,
      default: "cert",
    },
  },
  setup(props,{ emit } ) {
    const personId = inject("personId") as string;
    let { type } = toRefs(props);
    const certs = ref([]);
    const CertConfigEnum = {
      cert: {
        title: "typeName",
        columns: [
          { key: "regCompName", label: "注册单位" },
          { key: "regCertNo", label: "证书编号" },
          { key: "majorList", label: "证书专业" },
          { key: "organName", label: "发证机关" },
        ],
      },
      prof: {
        title: "regType",
        columns: [
          { key: "majorName", label: "资格专业" },
          { key: "organName", label: "发证机关" },
          { key: "releaseDate", type: "date", label: "发证日期" },
          { key: "certNo", label: "证书编号" },
        ],
      },
      safe: {
        title: "regType",
        columns: [
          { key: "validEdate", type: "date", label: "有效期至" },
          { key: "organName", label: "发证机关" },
          { key: "releaseDate", type: "date", label: "发证日期" },
          { key: "certNo", label: "证书编号" },
        ],
      },
      spec: {
        title: "regType",
        columns: [
          { key: "validEdate", type: "date", label: "有效期至" },
          { key: "organName", label: "发证机关" },
          { key: "releaseDate", type: "date", label: "发证日期" },
          { key: "certNo", label: "证书编号" },
        ],
      },
      tech: {
        title: "regType",
        columns: [
          { key: "techLevel", label: "等级" },
          { key: "validEdate", type: "date", label: "有效期至" },
          { key: "organName", label: "发证机关" },
          { key: "releaseDate", type: "date", label: "发证日期" },
          { key: "certNo", label: "证书编号" },
        ],
      },
      titl: {
        title: "titleName",
        columns: [
          { key: "titleMajorName", label: "职称专业" },
          { key: "releaseDate", type: "date", label: "取得时间" },
          { key: "organName", label: "发证机关" },
          { key: "certNo", label: "职称编号" },
        ],
      },
    };

    const record = ref([]);

    const handleClickChange = (regId) => {
      if(regId!==null||regId!==undefined){
        getRecordApi(regId).then(data=> {
          record.value=data
        })
      }
    };


    const init = async () => {
      const data = await getPersonCertApi(type.value, personId);
      certs.value = data;
      if(data.length){
        emit('ch')
      }
    };

    onMounted(init);

    return {
      type,
      certs,
      CretNameEnum,
      CertConfigEnum,
      parseTime,
      record,
      handleClickChange
    };
  },
});
</script>

<style lang="less" scoped>
.certificate-list {
  margin-bottom: 10px;

  .cer-boxList {
    margin-bottom: 20px;
    border: 1px solid #eaeaea;

    > h5 {
      padding: 14px 24px;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
      background: #f5f5f6;
      border-bottom: 1px solid #e8eaee;
    }

    .cetTips {
      position: relative;
      display: inline-block;
      padding: 0 5px;
      margin-left: 5px;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      color: #ff4747;
      border: 1px solid #ff4747;
      border-radius: 2px;

      span {
        position: absolute;
        top: -8px;
        right: -10px;
      }
    }
  }
}

::v-deep(.ant-row) {
  padding: 18px 24px 20px;

  .ant-col {
    padding-bottom: 8px;

    label {
      margin-right: 5px;
      color: #666;
    }
  }
}

.ant-popover-inner-content{
 .recordTitle{
   position: relative;
    padding-left: 12px;
    font-size: 14px;
    font-weight: bold;
   line-height: 20px;


    &::after{
      position: absolute;
      top: 4px;
      left: 0;
      width: 3px;
      height: 12px;
      background: @blue;
      content: "";
    }
  }

  .recordCon{
    position: relative;
    display: flex;
    padding-bottom: 20px;

    &::before{
      position: absolute;
      top: 7px;
      left: 80px;
      width: 9px;
      height: 9px;
      background: #D8D8D8;
      border-radius: 9px;
      content: "";
    }

    &:not(:last-child)::after{
      position: absolute;
      top: 16px;
      left: 84px;
      height: calc(100% - 9px);
      border-left: 1px solid #EDEFF2;
      content: "";
    }

    span{
      display: block;
      margin-right: 30px;
    }

    p{
      margin: 0;
    }
  }
}

.cerRecord {
  float: right;
}
</style>
<style lang="less">



.certs-title {
  margin-bottom: 10px;
  font-size: 16px;

  i {
    display: inline-block;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    line-height: 19px;
    color: #386bf3;
    background: #f0f6fe;
    border-radius: 2px;
  }
}
</style>
